import React, {Component} from 'react'
import {observer,inject} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Icon, Tree, Avatar, SwipeAction } from "weaver-mobile";
import Leaf from './Leaf';

@withRouter
@observer
export default class TreeList extends Component{
    getTreeProps = treeData => {
        const { store } = this.props;
        const { asyncGroupChildNode } = store;
        return {
            datas: treeData,
            async: true,
            freeze: true,
            onSelect: (key, data, level) => {},//console.debug(key, data, level),
            onAsyncSelect: asyncGroupChildNode,
            onChange: datas => {},//console.debug(datas),
            onExpanded: (keys, node, target) => {},//console.debug(keys, node, target),
            renderIcon: (_, node, lv) => {
                const {nodeType, icon, lastname} = node;
                if(nodeType === 'resource')
                    return <Avatar name={lastname || ''} url={icon} />;
                else if(['subcom', 'dept'].indexOf(nodeType) > -1)
                    return <Icon type={icon} color="#3e3a39" />;
                else
                    return null;
            },
            // decorator: (con, temp) => console.debug(con, temp),
            renderLeaf: node => <Leaf node={node} />,
           
        }
    }

    render(){
        const { store} = this.props;
        const { toJS, treeData, isHas, operateGroup, pageType} = store;
        let datas = toJS(treeData);

        return (
            <div className='tabPane content'>
                <div className='list list-tree'>
                    {
                        datas.length > 0 && datas.map((group, i) => {
                            const {id, name, treeData, key} = group;

                            const treeProps = this.getTreeProps(treeData);
                            return (
                                <div key={i}>
                                    <div className='groupInfo'>
                                        <Icon className='icon' type={`${id === '-2' ? 'gonggongzu' : 'sirenzu'}`} color={ (pageType==="group")  ? "#333" : "#b2b2b2"} size="xs" />
                                        <div className='name text-elli' style={(pageType === "group") ? {color: "#333"}:{}}>{name}</div>
                                        { ( (i == 0 && isHas) || i == 1 )   && (
                                          <Icon type="batch-addition-1" size="xs" onClick={() => operateGroup( (i == 0) ? "1" : "0")}/>
                                        ) }
                                    </div>
                                    <Tree {...treeProps} />
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}